<template>
  <div class="support-container">
    <h2>求助客服</h2>
    
    <el-card class="support-card">
      <template #header>
        <div class="support-header">
          <span>在线客服支持</span>
          <el-tag type="success">工作时间: 周一至周五 9:00-18:00</el-tag>
        </div>
      </template>
      
      <div class="support-content">
        <p class="support-desc">
          如果您在使用过程中遇到任何问题，请填写以下表单提交支持请求，我们将尽快为您解决问题。
        </p>
        
        <el-form 
          ref="supportFormRef"
          :model="supportForm"
          :rules="supportRules"
          label-width="80px"
          class="support-form"
        >
          <el-form-item label="问题类型" prop="type">
            <el-select v-model="supportForm.type" placeholder="请选择问题类型" style="width: 100%">
              <el-option label="任务问题" value="task"></el-option>
              <el-option label="账号问题" value="account"></el-option>
              <el-option label="支付问题" value="payment"></el-option>
              <el-option label="其他问题" value="other"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="任务ID" prop="taskId" v-if="supportForm.type === 'task'">
            <el-input v-model="supportForm.taskId" placeholder="请输入任务ID"></el-input>
          </el-form-item>
          
          <el-form-item label="优先级" prop="priority">
            <el-radio-group v-model="supportForm.priority">
              <el-radio label="low">低</el-radio>
              <el-radio label="medium">中</el-radio>
              <el-radio label="high">高</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="问题描述" prop="description">
            <el-input 
              v-model="supportForm.description" 
              type="textarea" 
              :rows="6"
              placeholder="请详细描述您遇到的问题"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="supportForm.contact" placeholder="请输入您的联系方式（手机号或邮箱）"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitSupportRequest" :loading="submitting">
              提交支持请求
            </el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    
    <el-card class="contact-card">
      <template #header>
        <div class="support-header">
          <span>其他联系方式</span>
        </div>
      </template>
      
      <div class="contact-list">
        <div class="contact-item">
          <el-icon><Phone /></el-icon>
          <span>客服电话：11111111</span>
        </div>
        <div class="contact-item">
          <el-icon><Message /></el-icon>
          <span>客服邮箱：11111@smartgig.com</span>
        </div>
        <div class="contact-item">
          <el-icon><Location /></el-icon>
          <span>公司地址：1111111</span>
        </div>
      </div>
    </el-card>
    
    <el-card class="faq-card">
      <template #header>
        <div class="support-header">
          <span>常见问题解答</span>
        </div>
      </template>
      
      <el-collapse accordion>
        <el-collapse-item title="如何发布任务？" name="1">
          <div>只有企业用户才能发布任务，点击"发布任务"按钮，填写任务信息即可发布。</div>
        </el-collapse-item>
        <el-collapse-item title="如何申请任务？" name="2">
          <div>零工用户可以在任务列表中查看可用任务，点击"申请任务"按钮即可申请。</div>
        </el-collapse-item>
        <el-collapse-item title="任务申请被拒绝怎么办？" name="3">
          <div>企业用户有权根据实际需求选择合适的零工，如果您的申请被拒绝，可以尝试申请其他任务或联系客服了解详情。</div>
        </el-collapse-item>
        <el-collapse-item title="如何结算任务报酬？" name="4">
          <div>任务完成后，企业用户可以在任务详情页点击"结算任务"按钮进行结算，零工用户可以在钱包中查看收入明细。</div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Phone, Message, Location } from '@element-plus/icons-vue'

const supportFormRef = ref(null)
const submitting = ref(false)

const supportForm = ref({
  type: '',
  taskId: '',
  priority: 'medium',
  description: '',
  contact: ''
})

const supportRules = {
  type: [
    { required: true, message: '请选择问题类型', trigger: 'change' }
  ],
  taskId: [
    { required: false, message: '请输入任务ID', trigger: 'blur' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请描述您遇到的问题', trigger: 'blur' },
    { min: 10, message: '问题描述不能少于10个字符', trigger: 'blur' }
  ],
  contact: [
    { required: true, message: '请输入您的联系方式', trigger: 'blur' }
  ]
}

const submitSupportRequest = async () => {
  if (!supportFormRef.value) return
  
  await supportFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        // 这里应该有一个API请求来提交支持请求
        // 目前只是模拟提交成功
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('支持请求已提交，我们将尽快联系您')
        resetForm()
      } catch (error) {
        ElMessage.error('提交失败，请稍后重试')
      } finally {
        submitting.value = false
      }
    } else {
      ElMessage.warning('请完善表单信息')
      return false
    }
  })
}

const resetForm = () => {
  if (supportFormRef.value) {
    supportFormRef.value.resetFields()
  }
}
</script>

<style scoped>
.support-container {
  padding: 20px;
}

.support-card, .contact-card, .faq-card {
  margin-bottom: 20px;
}

.support-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.support-desc {
  margin-bottom: 20px;
  color: #606266;
}

.support-form {
  max-width: 600px;
}

.contact-list {
  padding: 10px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 16px;
}

.contact-item .el-icon {
  margin-right: 10px;
  font-size: 20px;
  color: #409EFF;
}

@media (max-width: 768px) {
  .support-form {
    max-width: 100%;
  }
}
</style> 